<script lang="ts">
  import { defineComponent } from 'vue'
  import { DpmObs, DpmPipe } from './util'
  export default defineComponent({
    name: '多Tab页详情',
  })
</script>
<script lang="ts" setup>
  import { Tabs, TabPane, Card } from 'ant-design-vue'
  import { provide, reactive, ref, watch } from 'vue'
  import { DtlParamManager,t } from '@/utils/common'
  <% tabs.forEach((tab, index) => { %>
  import <%= tab.key %> from '../<%= tab.key %>/<%= tab.dataSourceType === 'detail' ? 'detail.vue' : 'list.vue' %>'
  <% }); %>
  let activeKey = ref<string>('head')

  /**
   * 判断是否是新增
   */
  let query = reactive(window.Longnows.router.currentRoute.value.query)

  const dpmTabs = new DtlParamManager<DpmPipe, DpmObs>()
  provide('dpmTabs', dpmTabs)
  let isShow = ref<boolean>(false)

  watch(
    query,
    (val) => {
      dpmTabs.setType(query.editType)
      if (val.editType !== 'ADD') {
        dpmTabs.setUid(query.uid)
        isShow.value = true
      } else {
        dpmTabs.setUid('')
        isShow.value = false
      }
      dpmTabs.setType(val.editType)
    },
    { immediate: true, deep: true },
  )
</script>
<template>
  <div class="flex-content-wrapper">
    <div class="flex-content">
      <Card class="cardContent" :bordered="false">
        <div style="height: 100%">
          <Tabs size="small" v-model:activeKey="activeKey" class="white" type="card">
            <% tabs.forEach((tab, index) => { %>
            <TabPane class="white" key="<%= tab.key %>" :tab="t('<%= tab.title %>')">
              <<%= tab.key %>></<%= tab.key %>>
            </TabPane>
            <% }); %>
          </Tabs>
        </div>
      </Card>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .flex-content-wrapper {
    padding: 0;
    background-color: unset;
  }

  .flex-content {
    overflow: auto;
  }

  .cardContent {
    background-color: white;

    > ::v-deep(.ant-card-body) {
      height: 100%;
    }

    ::v-deep(.ant-tabs) {
      height: 100%;

      > .ant-tabs-content-holder .ant-tabs-content {
        height: 100%;
      }
    }
  }
</style>